<template>
  <div>
    <common-map>
      <template slot="header">
        <el-date-picker
          class="date-picker"
          v-model="dateValue"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right"
        />
        <el-select
          v-model="typeValue"
          placeholder="请选择流量类型"
          class="type-picker"
          popper-class="select-popper"
        >
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="primary" @click="confirm">搜索</el-button>
      </template>
      <template slot="main">
        <v-chart
          :options="chinaMapConfig"
          autoresize
          ref="map"
          @click="chartClick"
        ></v-chart>
        <i class="el-icon-back map-back" v-if="isBack" @click="back"></i>
      </template>
    </common-map>
  </div>
</template>

<script>
import 'echarts/map/js/china.js'
import CommonMap from '@/components/CommonMap/index.vue'
import CommonDataMixin from '@/mixins/commonDataMixin'

const provincesText = [
  '上海',
  '河北',
  '山西',
  '内蒙古',
  '辽宁',
  '吉林',
  '黑龙江',
  '江苏',
  '浙江',
  '安徽',
  '福建',
  '江西',
  '山东',
  '河南',
  '湖北',
  '湖南',
  '广东',
  '广西',
  '海南',
  '四川',
  '贵州',
  '云南',
  '西藏',
  '陕西',
  '甘肃',
  '青海',
  '宁夏',
  '新疆',
  '北京',
  '天津',
  '重庆',
  '香港',
  '澳门',
  '台湾'
]
const provincesName = [
  'shanghai',
  'hebei',
  'shanxi',
  'neimenggu',
  'liaoning',
  'jilin',
  'heilongjiang',
  'jiangsu',
  'zhejiang',
  'anhui',
  'fujian',
  'jiangxi',
  'shandong',
  'henan',
  'hubei',
  'hunan',
  'guangdong',
  'guangxi',
  'hainan',
  'sichuan',
  'guizhou',
  'yunnan',
  'xizang',
  'shanxi1',
  'gansu',
  'qinghai',
  'ningxia',
  'xinjiang',
  'beijing',
  'tianjin',
  'chongqing',
  'xianggang',
  'aomen',
  'taiwan'
]
export default {
  name: 'index',
  components: {
    CommonMap
  },
  mixins: [CommonDataMixin],
  data () {
    return {
      chinaMapConfig: {},
      // 地图名字
      mapName: 'china',
      isBack: false
    }
  },
  methods: {
    render (data, area) {
      this.chinaMapConfig = {
        tooltip: {},
        geo: {
          map: area,
          roam: false,
          label: {
            normal: {
              show: true,
              color: 'rgb(255, 255, 255)'
            },
            emphasis: {
              color: 'rgb(255, 255, 255)'
            }
          },
          itemStyle: {
            // 地图区域的多边形 图形样式。
            normal: {
              areaColor: 'rgba(43, 196, 243, 0.08)',
              borderColor: 'rgba(43, 196, 243, 1)',
              borderWidth: 1,
              shadowColor: 'rgba(88, 184, 249, 1)',
              shadowBlur: 15
            },
            emphasis: {
              label: {
                show: true,
                color: 'rgb(255, 255, 255)'
              },
              areaColor: 'rgb(250,13,31)'
            }
          }
        },
        visualMap: {
          type: 'continuous',
          realtime: false,
          calculable: true,
          min: 0,
          max: 100000,
          inRange: {
            color: [
              'rgb(196,248,24)',
              'rgb(85,247,13)',
              'rgb(66,229,84)',
              'rgb(69,227,212)',
              'rgb(56,178,251)',
              'rgb(17,85,244)',
              'rgb(81,17,238)',
              'rgb(195,17,227)',
              'rgb(251,13,187)',
              'rgb(251,13,135)',
              'rgb(250,138,28)'
            ]
          },
          textStyle: {
            color: 'rgb(255, 255, 255)'
          }
        },
        series: [
          {
            name: '数据量',
            type: 'map',
            roam: false,
            coordinateSystem: 'geo',
            geoIndex: 0,
            label: {
              emphasis: {
                formatter: '{b}',
                position: 'right',
                show: true
              }
            },
            data: data
          }
        ]
      }
    },
    // 向外暴露地图信息
    exportMapConfig () {
      if (this.dateValue && this.typeValue != null) {
        const dateValue = this.convertDateToStr(this.dateValue)
        const typeValue = this.typeValue
        const area = this.mapName
        const options = {
          startTime: dateValue[0],
          endTime: dateValue[1],
          area: 0,
          data: typeValue
        }
        this.$emit('confirm', {
          area,
          options
        })
      } else {
        this.$message.error('请选择完毕后再进行搜索！')
      }
    },
    confirm () {
      this.exportMapConfig()
    },
    // 中国地图被点击
    chartClick (e) {
      if (this.mapName === 'china') {
        this.mapName = e.name
        const provinceIndex = provincesText.indexOf(e.name)
        if (provinceIndex !== -1) {
          require('../../../../../node_modules/echarts/map/js/province/' +
            provincesName[provinceIndex] +
            '.js')
        }
        this.isBack = true
        this.render([], this.mapName)
        this.exportMapConfig()
      }
    },
    back () {
      this.mapName = 'china'
      this.isBack = false
      this.render([], this.mapName)
    }
  },
  mounted () {
    this.render([], this.mapName)
  },
  computed: {
    // 获取中国地图的请求数据
    chinaMapData () {
      return this.getChinaMapData()
    }
  },
  watch: {
    chinaMapData () {
      this.render(this.chinaMapData, this.mapName)
    }
  },
  inject: ['getChinaMapData']
}
</script>

<style scoped>
  .map-back {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: 3.6rem;
    color: #006edd;
    cursor: pointer;
  }
</style>
